<template>
    <div class="department">
        <div class="selAll" @click="isSelAll">
            <div v-show="isSelAllText">取消全选</div>
            <div v-show="!isSelAllText">全选</div>
        </div>
        <div class="container">
            <div 
            v-for="(item,index) in departmentList"
            :key="index" 
            style="position:relative"
            >
                <div class="checkbox">
                    <input type="checkbox" :id=" `checkbox${index}` " :checked="item.isChecked">
                    <span></span>
                </div>
                <label class="checkbox_container" :for=" `checkbox${index}` " @click="selCheckBox(index)">
                    <slot name="content">
                        <!-- <div class="name">{{item.name}}</div> -->
                        <img src="./img/icon.png" alt="">
                        <div class="platform">{{item.name}}</div>
                    </slot>
                </label>
            </div>
        </div>
        <X-Button :gradients="['#1194e0', '#1194e0']" class="search_btn" @click.native="selConfrim">确认</X-Button>
        <!-- <X-Button :gradients="['#1194e0', '#1194e0']" class="search_btn" @click.native="selConfrim">关闭</X-Button> -->
    </div>
</template>
<script>
import { XButton } from "vux";
export default {
  components: {
    XButton
  },
  props: {
    list: {
      type: Array,
      required: true
    },
    checkIndex: {
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {
      isSelAllText: false,
      departmentList: []
    };
  },
  created() {
    let list = this.list;

    //全部设为空
    list.forEach((item, index) => {
      item.isChecked = false;
    });

    if (this.checkIndex !== "") {
      //单个值可选
      list[this.checkIndex].isChecked = true;
    }

    // this.list = list;

    //赋值
    this.departmentList = list;
  },
  methods: {
    selConfrim() {
      this.$emit("on-select", this.isSelAllText, this.departmentList);
    },
    isSelAll() {
      let list = this.$deepClone(this.departmentList);
      if (this.isSelAllText) {
        this.isSelAllText = !this.isSelAllText;
        for (let i = 0; i < list.length; i++) {
          list[i].isChecked = false;
        }
      } else {
        this.isSelAllText = !this.isSelAllText;
        for (let i = 0; i < list.length; i++) {
          list[i].isChecked = true;
        }
      }
      this.departmentList = list;
    },
    selCheckBox(index) {
      let list = this.$deepClone(this.departmentList);
      for (let i = 0; i < list.length; i++) {
        if (i != index) {
          list[i].isChecked = false;
        }
      }

      if (list[index].isChecked) {
        list[index].isChecked = !list[index].isChecked;
      } else {
        list[index].isChecked = !list[index].isChecked;
      }

      this.departmentList = list;
    }
  }
};
</script>

<style lang="less" scoped>
.department {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: #fff;
  z-index: 998;

  .selAll {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 0.2rem;
    text-align: right;
    font-size: 0.28rem;
    color: #fff;
    line-height: 0.6rem;
    background: #4e76a9;
    z-index: 999;
  }
}
.container {
  padding: 0.6rem 0.2rem 1rem;
}

.checkbox {
  position: absolute;
  top: e("calc(50% - 0.15rem)");
  left: 0.1rem;
  width: 0.3rem;
  height: 0.3rem;
  z-index: -1;
  // margin: 0 0.56rem 0 0.1rem;

  span {
    display: block;
    width: 100%;
    height: 100%;
    border: 0.02rem solid #bbbaba;
    border-radius: 50%;

    &::before {
      color: transparent;
      transition: color ease 2s;
    }
  }

  input {
    visibility: hidden;
    position: absolute;

    &:checked + span {
      //   content: "";
      background: #1194e0;
      border-color: #1194e0;
    }

    &:checked + span::before {
      content: "\2713";
      position: absolute;
      top: 5%;
      left: e("calc(50% - .08rem)");
      font-size: 0.2rem;
      color: #fff;
      text-align: center;
    }
  }
}
.checkbox_container {
  display: flex;
  align-items: center;
  padding: 0.22rem 0 0.22rem 0.7rem;
  z-index: 5;
  // display: block;
  // width: 100%;

  img {
    display: block;
    width: 0.56rem;
    height: 0.56rem;
    margin-right: 0.3rem;
  }

  .name {
    font-size: 0.28rem;
    color: #333;
    margin-right: 0.2rem;
  }
}

.search_btn {
  position: fixed;
  bottom: 0;
  left: e("calc(50% - 48%)");
  width: 95%;
}
</style>
